<script>
import {getLoginStorage} from "../saves/sessionStorage";

export default {
  name: "top",
  data() {
    return {
      userHead: "../img/headImg.jpg",
      login: getLoginStorage(),
    }
  },
  methods: {
    switchPublicPosts() {
      this.$router.push({name: "publicPosts"})
    },
    switchPrivatePosts() {
      if (this.login) {
        this.$router.push({name: "privatePosts"})
      } else {
        this.$router.push({name: "account"})
      }

    },
    switchAccount() {
      this.$router.push({name: "account"})
    }
  }
}
</script>

<template>
  <div id="top">
    <div class="top-box">
      <el-col :lg="9" :md="9" :sm="8" :xl="9" :xs="5">
        <div class="grid-content">
          <img alt="" height="100px" src="../img/logo.jpg" width="78px">
        </div>
      </el-col>
      <el-col :lg="12" :md="12" :sm="12" :xl="11" :xs="14">
        <div class="grid-content">
          <el-button class="top-link" @click="switchPublicPosts">公共论坛</el-button>
          <el-button class="top-link" @click="switchPrivatePosts">个人论坛</el-button>
        </div>
      </el-col>
      <el-col :lg="2" :md="3" :sm="4" :xl="2" :xs="5">
        <div class="grid-content">
          <el-button v-show="!this.isLogin" class="top-login" @click="switchAccount">登录</el-button>
          <el-avatar v-show="this.isLogin" :size="70" class="user-head" shape="square"></el-avatar>
        </div>
      </el-col>
    </div>
  </div>
</template>

<style scoped src="../style/top.css">

</style>